<template>
	<view>
		<van-search
		  :value="value"
		  placeholder="输入城市名进行搜索"
		  show-action
		  @search="onSearch"
		  @change="onSearch"
		  @cancel="onCancel"
		/>
		 <view class="caty-place">
		 	<image class="caty-image" src="@/static/icon/dingwei.png" mode=""></image>
			<text style="font-size: 28rpx; font-weight: 500;" @click="catyuson()">当前定位城市 {{region.city}}</text>
		 </view>
		 <!-- 索引列表 -->
		 <u-index-list :index-list="indexList">
		 		<template v-for="(item, index) in itemArr">
		 			<!-- #ifdef APP-NVUE -->
		 			<u-index-anchor :text="indexList[index]"></u-index-anchor>
		 			<!-- #endif -->
		 			<u-index-item>
		 				<!-- #ifndef APP-NVUE -->
		 				<u-index-anchor :text="indexList[index]"></u-index-anchor>
		 				<!-- #endif -->
		 				<view class="list-cell" v-for="(cell, i) in item" @click="cityes(item,i)">
		 					{{cell}}
		 				</view>
		 			</u-index-item>
		 		</template>
		 	</u-index-list>
	</view> 
</template>
<script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@latest/dist/pinyin-pro.js"></script>
<script>
	import {regionines} from '@/employees/region.js'
	// import Pinyin from 'jian-pinyin'
	import { pinyin } from 'pinyin-pro';
	export default{
		data(){
			return{
				value:'',
				infolist:[],
				itemArr:[],
				arr:[],
				region:{
					province:'',
					city:'',
					county:''
				},
				indexList:['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']
			}
		},
		onLoad(){
			this.hovern()
			this.loafigthel()
		},
		methods:{
			  loafigthel(){
				this.region = wx.getStorageSync('chateh')
			  },
			// 获取城市数据
			async hovern(){
				
			// 选择省
			const rew = await regionines()
			for(let i = 0;i<rew.length;i++){
				for(let j = 0;j<rew[i].city.length;j++){
					this.infolist.push(rew[i].city[j].name)
					this.arr.push(rew[i])
				}
			}
			 this.infolist.sort(function(a,b){
				return a.localeCompare(b)
			 })
			   console.log(this.infolist)
			  // console.log(this.infolist)
				// for(let i = 0;i<this.infolist.length;i++){
				// 	Arrow.push(pinyin(this.infolist[i].slice(0,1),{ pattern: 'first',toneType: 'none' }))
				// }
				
				 for(let i= 0;i<this.indexList.length;i++){
					 this.itemArr.push([])
				 }
				this.infolist.forEach((item,index) =>{
						 for(let i= 0;i<this.indexList.length;i++){
					if(pinyin(this.infolist[index].slice(0,1),{ pattern: 'first',toneType: 'none' }) == this.indexList[i]){
							this.itemArr[i].push(item)
							this.itemArr.join(',')
						 }
					}
				})
			},
			 
			// 关键字搜索
			onSearch(event){
					for (let i = 0;i<this.itemArr.length;i++) {
						let aaa = this.itemArr[i]
						for(let j = 0;j<aaa.length;j++){
                          
						}
					}
				
				 
			},
			// 点击选择城市
			cityes(item,i){
				// console.log(this.arr)
				for(let o = 0;o<this.arr.length;o++){
					for(let j = 0;j<this.arr[o].city.length;j++){
						if(this.arr[o].city[j].name == item[i]){
						this.region.province = this.arr[o].name
						this.region.city = this.arr[o].city[j].name
						this.region.county = ''
						}
					}
				}
				// let con = this.infolist
				// 	for(let i = 0; i<this.infolist.length;i++){
				// 	      for(let j =0;j< this.infolist[i].city.length;j++){
				// 		  }
				// 			}
				
				wx.setStorage({
					key:'city',
					data:this.region
				})
				uni.navigateBack()
			},
			onCancel(){
				uni.navigateBack()
			},  
			catyuson(e){ 
				wx.setStorage({
					key:'city',
					data:this.region
				})
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 30upx;
		z-index: 999;
		width: 100%;
		padding: 0 80upx;
		background-color:#f9f9f9;
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color:$font-color-base;
			border-radius: 20px;
			background: rgba(255,255,255,.6);
		}
	}
	.caty-place{
		height: 35px;
		border-bottom: 2rpx solid #f0f0f0;
	}
	.caty-image{
		width: 36rpx;
		height: 36rpx;
		margin-left: 45rpx;
		margin-right: 8rpx;
		transform: translateY(15%);
	}
	.van-index-anchor{
		padding: 0 !important;
	}
	
	.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;
			border-top: 1px solid #f1f1f1;
		}
		.list-cell:focus{
			background-color: #dedede !important;
		}
		.u-index-anchor{
			background-color: #fff !important;
		}
</style>